<template>
	<view>
		<view style="position: fixed;width: 100%;z-index: 99;">
			<u-tabs :list="tabs" :is-scroll="false" :current="tabs_id" @change="tabsChange"></u-tabs>
			<view class="th-box u-flex">
				<view class="left u-p-l-20">名称</view>
				<view class="right order">
					<view class="th" :style="{'margin-left':-scroll_left+'px'}">
						<view class="zf item" @tap="orderClick(0)">
							<view class="u-flex" >
								<view>涨幅</view>
								<view v-show="order_field == 0">
									<u-icon :name="order=='desc' ? 'arrow-upward':'arrow-downward'" color="#ffff00"></u-icon>
								</view>
							</view>
						</view>
						<view class="zd item" @tap="orderClick(1)">
							<view class="u-flex">
								<view>涨跌家数</view>
								<view v-show="order_field == 1"><u-icon :name="order=='desc' ? 'arrow-upward':'arrow-downward'" color="#ffff00"></u-icon></view>
							</view>
						</view>
						<view class="lz item" @tap="orderClick(2)">
							<view class="u-flex">
								<view>领涨债券</view>
								<view v-show="order_field == 2"><u-icon :name="order=='desc' ? 'arrow-upward':'arrow-downward'" color="#ffff00"></u-icon></view>
							</view>
						</view>
						<view class="zf item" @tap="orderClick(3)">
							<view class="u-flex">
								<view>最新</view>
								<view v-show="order_field == 3"><u-icon :name="order=='desc' ? 'arrow-upward':'arrow-downward'" color="#ffff00"></u-icon></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--全部-->
		<view v-show="tabs_id == 0">
			<l-bks-list ref="bksList" :list="all_bks" :status="all_bks_status" @scrollToLeft="scrollToLeft"/>
		</view>
		<!--行业板块-->
		<view v-show="tabs_id == 1">
			<l-bks-list ref="bksList" :list="hy_bks" :status="hy_bks_status" @scrollToLeft="scrollToLeft" />
		</view>
		<!--概念板块-->
		<view v-show="tabs_id == 2">
			<l-bks-list ref="bksList" :list="gn_bks" :status="gn_bks_status" @scrollToLeft="scrollToLeft"/>
		</view>
		<!--地区板块-->
		<view v-show="tabs_id == 3">
			<l-bks-list ref="bksList" :list="dq_bks" :status="dq_bks_status" @scrollToLeft="scrollToLeft"/>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				tabs: [{
						name: '全部',
						arr_key:'all_bks',
						page:1,
						lastPage:1
					}, {
						name: '行业',
						arr_key:'hy_bks',
						page:1,
						lastPage:1
					}, {
						name: '概念',
						arr_key:'gn_bks',
						page:1,
						lastPage:1
					},{
						name: '地区',
						arr_key:'dq_bks',
						page:1,
						lastPage:1
					}],
					tabs_id: 0,
					scroll_left:0,
					order_field:0,
					order:'desc',
					all_bks:[],
					hy_bks:[],
					gn_bks:[],
					dq_bks:[],
					all_bks_status:'loding',
					hy_bks_status:'loding',
					gn_bks_status:'loding',
					dq_bks_status:'loding',
					scroll_tabs:{}
					
			}
		},
		onLoad({type}) {
			let t = type ? type:0;
			let k = {"0":0,"2":1,"3":2,"1":3};
			
			this.tabs_id = k[t];
			let key = this.tabs[this.tabs_id]['arr_key'];
			
			this.$u.api.bksList({'type':this.tabs_id}).then(data=>{
				this[key] = data.data;
				this.tabs[this.tabs_id].lastPage = data.last_page;
			});
		},
		onReachBottom(){
			const key = this.tabs[this.tabs_id]['arr_key'],
				  page = this.tabs[this.tabs_id]['page'],
				  statusKey = key+'_status',
				  lastPage = this.tabs[this.tabs_id].lastPage;
				  
			this[statusKey] = 'loding';
			console.log(lastPage,'lastPage');
			let newPage = page +1;
			if(newPage > lastPage){
				this[statusKey] = 'lastdata';
				return false;
			}
			
			this.$u.api.bksList({"page":newPage,"type":this.tabs_id, "order":this.order, "order_f":this.order_field}).then(data=>{
				this[key] = this[key].concat(data.data);
				this.tabs[this.tabs_id].page = newPage;
				this.tabs[this.tabs_id].lastPage = data.last_page;
			})
			
		},
		methods:{
			tabsChange(index) {
				this.tabs_id = index;
				this.scroll_left = this.scroll_tabs[this.tabs_id] ? this.scroll_tabs[this.tabs_id]:0;
				let key = this.tabs[this.tabs_id]['arr_key'];
				let data = this[key];
				
				if(data.length == 0){
					
					const statusKey = key+'_status';
					
					this[statusKey] = 'loding';
					
					this.$u.api.bksList({"type":this.tabs_id, "order":this.order, "order_f":this.order_field}).then(data=>{
						this[key] = data.data;
						
						this[statusKey] =  this[key].length == 0 ? 'nodata':'hide';
						
						this.tabs[this.tabs_id].lastPage = data.last_page;
						
					}).catch(err=>{
						// console.log(err,2222222222);
						this[statusKey] = 'abnormal';
					});
				}
				
			},
			scrollToLeft(scroll_left){
				this.scroll_left = scroll_left;
				this.scroll_tabs[this.tabs_id] = scroll_left;
			},
			orderClick(field){
				
				uni.pageScrollTo({
					scrollTop: 0
				});
				
				this.order_field = field;
				this.order = this.order == 'desc' ? 'asc':'desc';
				let key = this.tabs[this.tabs_id]['arr_key'];
				// this.$refs.bksList.orderClick(this.tabs_id, field, this.order);
				this.$u.api.bksList({"type":this.tabs_id, "order":this.order, "order_f":this.order_field}).then(data=>{
					this[key] = data.data;
					this.tabs[this.tabs_id].lastPage = data.last_page;
				}).catch(err=>{
					this[statusKey] = 'abnormal';
				});
				
			}
		}
	}
</script>

<style scoped>
	.th-box .left{
		width: 30%;
	}
	.th-box .right{
		width: 70%;
		white-space: nowrap;
	}
	.th-box{
		background-color: #fa3534;
		color: #fff;
	}
	.th-box .item{
		display: inline-block;
	}
	.th-box .right .item,
	.th-box .left{
		height: 60rpx;
		line-height: 60rpx;
	}
	.th-box .left{
		background-color: #fa3534;
		z-index: 9;
	}
	.zf,.zd,.lz{
		width: 160rpx;
		padding: 0 10rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
	.order .icon{
		transform:scale(.6);
	}
</style>
